<!-- 新建样品里的客户选择组件 -->
<template>
	<view>
		<u-popup safe-area-inset-bottom v-model="show" :mode="mode">

			<view class="button"
				style="padding: 20rpx 20rpx 0 20rpx;position: fixed;width: 100%;background-color: #fff;">
				<view style="width: 100%;display: flex;justify-content: space-between;">
					<uni-button size="mini" @click="show = false" type="danger" style="height: 60rpx;"
						:loading="loading"><span style="color:#000">
							取消</span></uni-button>
					<uni-button size="mini" @click="confrim" type="primary" style="height: 60rpx;"
						:loading="loading"><span>
							确认</span></uni-button>
				</view>
				<!-- 搜索区域 -->
				<view style="width: 100%;background-color: #fff;">
					<view style="">
						<uni-search-bar style="color:#fff" :textColor="'#ccc'" @confirm="search"
							v-model="queryParam.cCusName" @clear="cancel" placeholder="请输入客户名称" @cancel="cancel"
							@input="inputChange"></uni-search-bar>
					</view>
				</view>

			</view>


			<view class="outerBox" style="padding-top: 200rpx;">
				<view v-for="(item, index) in data" :key="index">
					<view @click="cellItem(item)" style="padding: 20rpx 30rpx;"
						:style="{ background: item.checked ? '#cdcdcd' : '#fff' }">
						{{ item.RealName}}
					</view>
					<u-line :color="item.checked ? '#fff' : '#cdcdcd'" />
				</view>

				<view style="padding-bottom: 20px;">
					<LoadingMore :status="status" :contentText="contentText" :rows="data"></LoadingMore>
				</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	// import PaginationCom from "@/components/PaginationCom.vue";
	import {
		Base_ManageBase_UserGetDataList,
	} from '@/api/interface.js'
	export default {
		props: {
			mode: {
				type: String,
				default: "bottom"
			},
			isAllData: {
				default: false,
				type: Boolean
			} // 是否查询全部数据
		},
		components: {
			// PaginationCom,
			// "van-pagination": Pagination,
		},
		data() {
			return {
				// 加载状态
				status: "loading",
				contentText: {
					contentdown: '轻轻上拉',
					contentrefresh: '努力加载中...',
					contentnomore: '实在没有了'
				},
				immediateCheck: false,
				loading: false,
				finished: false,
				selectedRowKeys: [],
				queryParam: {
					cCusName: "",
					cCusType: null,
					isAllData: this.isAllData
				},
				pagination: {
					current: 1,
					pageSize: 10,
					Total: 0,
				},
				entity: {},
				judgment: true,
				data: [],
				show: false,
				Id: "",
				PageRows: 20,
				isSearchUser: false,
				// 传递过来的执行人
				SalesmanName: ""
			};
		},
		onLoad() {
			// 组件创建的时候初始默认检索提示
			this.isSearchUser = true
		},
		methods: {
			// 触底
			lower(e) {
				// if (this.data.length >= this.pagination.Total) return
				// // 上拉加载
				// this.pagination.current++;
				// this.getDataList()
			},
			close() {
				this.show = false;
			},
			// 搜索实时输入
			inputChange(event) {
				this.pagination.current = 1
				this.data = []
				this.status = "loading"
				this.queryParam.cCusName = event
				this.getDataList();
			},
			// 取消
			cancel() {
				this.queryParam.cCusName = ""
				this.data = [];
				this.status = "noMore"
				this.isSearchUser = true
				this.getDataList();
			},
			onSearch() {
				if (this.queryParam.cCusName) {
					this.search(this.queryParam.cCusName)
				} else {
					this.search
				}

			},
			//搜索
			search(value) {
				this.isSearchUser = false
				this.pagination.current = 1
				this.data = []
				this.status = "loading"
				this.getDataList();
			},
			// 选择确定
			confrim() {
				this.loading = true
				let arr = this.data.filter(item => item.checked)
				console.log('选择确定了', this.data, arr)

				this.$emit('confrim', arr)
				this.loading = false
			},
			// 列表点击
			cellItem(item) {
				this.$forceUpdate()
				console.log('列表点击', item, item.checked)
				this.$set(item, "checked", !item.checked);
			},
			// 获取执行人下拉列表数据
			getDataList(SalesmanName) {
				this.status = "loading"
				Base_ManageBase_UserGetDataList({
						PageIndex: 1,
						PageRows: 99999,
						Search: {
							condition: "StaffName",
							Keyword: this.queryParam.cCusName
						},
						SortField: "CreateTime",
						SortType: "desc"
					})
					.then(resJson => {
						if (resJson.Success) {
							this.data = resJson.Data
							// 赋值总条数
							this.data.forEach(item => {
								item.checked = false
							})
							console.log('最终传递过来需要处理的执行人', this.SalesmanName)
							if (this.SalesmanName) {
								let arr = []
								let SalesmanNameArr = this.SalesmanName.split('|')

								// 赋值总条数
								this.data.forEach(item => {
									SalesmanNameArr.forEach(v => {
										if (item.RealName === v) {
											item.checked = true
											arr.push(item)
										}
									})

								})
							}
							this.status = "noMore"

						} else {
							this.$errorToast(resJson.Msg);
							this.status = "noMore"
						}
					});
			},
			init(SalesmanName) {
				this.show = true;
				this.cancel()
				this.getDataList(SalesmanName)
			},
			openForm(SalesmanName) {
				// 传递过来的执行人----------
				this.SalesmanName = SalesmanName
				this.init();
			}
		}
	};
</script>

<style scoped>
	::v-deep uni-button {
		margin: 0 !important;
	}

	.search-none {
		height: 70%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.outerBox {
		/* 	height: calc(100vh - 120px);
		padding-bottom: 50px;
		box-sizing: border-box;
		overflow: auto; */
		/* #ifdef H5 */
		height: calc(100vh - 350px);
		/* #endif */
		/* #ifdef APP */
		height: calc(100vh - 220px);
		/* #endif */
	}

	.ckbxcli {
		border: 1px solid Gainsboro;
		width: 95%;
		text-align: center;
		margin-left: 2%;
		margin-top: 10px;
		box-sizing: border-box;
		padding: 20rpx;
		/* 	padding-right: 0px;
		padding-left: 0px;
		padding-bottom: 2px; */
		cursor: pointer;
		/* padding-top: 6px; */
		list-style-type: none;
		display: inline-block;
	}

	.ul {
		/* margin-top: 20px; */
	}

	.nav {
		position: fixed !important;
		width: 100%;
	}
</style>